<template>
  <div v-if="!app.isMobile" class="horizontal-header">
    <el-menu
      ref="menuRef"
      mode="horizontal"
      class="horizontal-header-menu"
      :default-active="defaultActive?.id"
    >
      <el-menu-item
        @click="handleSelect(m)"
        v-for="m in menu.parentMenu"
        :key="m.id"
        :index="m.id"
        :disabled="m.forbidden"
      >
        <template #title>
          <div v-if="toRaw(m.icon)" :class="['sub-menu-icon', m.icon]">
            <component :is="useRenderIcon(toRaw(m.icon))" />
          </div>
          <div class="div_attr">
            <span class="select-none">
              {{ m.text }}
            </span>
          </div>
        </template>
      </el-menu-item>
    </el-menu>
    <SettingNav />
  </div>
</template>
<script setup lang="ts">
import { ref, toRaw, nextTick, computed } from "vue";
import { useRenderIcon } from "@/components/icon/src/hooks";
import SettingNav from "./settingNav.vue";
import { useAppHooks } from "@/core/pinia/store/app.store";
import { useMenuHooks } from "@/core/pinia/store/menu.store";
import { useRouter } from "vue-router";
import { IMenu } from "@/core/pinia/interface";
const app = useAppHooks();
const menu = useMenuHooks();
const router = useRouter();
const menuRef = ref();
const defaultActive = computed(() => {
  return menu.getActiveHorizontal;
});

const handleSelect = (item: IMenu) => {
  if (item.moda !== "LINK") {
    useMenuHooks().setChoose(item.id);
    router.push({
      path: menu.getDefaultActive.router
    });
  } else {
    window.open(item.link, "_blank");
  }
};
nextTick(() => {
  menuRef.value?.handleResize();
});
</script>

<style lang="scss" scoped>
:deep(.el-loading-mask) {
  opacity: 0.45;
}
.el-menu-item * {
  vertical-align: middle;
}
.div_attr {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
}
.logout {
  max-width: 120px;
  ::v-deep(.el-dropdown-menu__item) {
    display: inline-flex;
    flex-wrap: wrap;
    min-width: 100%;
  }
}
.vertical-header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 280px;
  height: 48px;
  color: #000000d9;

  .el-dropdown-link {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 48px;
    padding: 10px;
    color: #000000d9;
    cursor: pointer;

    p {
      font-size: 14px;
    }

    img {
      width: 22px;
      height: 22px;
      border-radius: 50%;
    }
  }
}
.logout {
  max-width: 120px;

  ::v-deep(.el-dropdown-menu__item) {
    display: inline-flex;
    flex-wrap: wrap;
    min-width: 100%;
  }
}
</style>
../../../../components/icon/src/hooks
